
<template>
  <div class="aside">
    <!-- 滚动条不支持ssr ，此插件用于新消息提醒非常好-->
    <div class="anchor-info">
      呆萌小柒月
    </div>

    <div id="chatbox" class="sidebar_wrap">
      <client-only>
        <perfect-scrollbar ref="scroll" @scroll="lisenScroll">
          <ul>
            <li v-for="(v, index) in 150" :key="v">
              {{ index }}
            </li>
          </ul>
        </perfect-scrollbar>
      </client-only>
    </div>

    <!-- 梯形 -->
    <div class="right_box">
      <div class="right" @click="toBottom">
        右边按钮
      </div>
      <div class="pentagon">
        <div class="trapezoid" />
        <div class="rectangle">
          长方形内容
        </div>
      </div>
    </div>
    <!-- 梯形 -->

    <Dialog />
  </div>
</template>
<script>
import Dialog from './components/dialog'
export default {
  components: {
    Dialog
  },
  data () {
    return {}
  },
  methods: {
    lisenScroll (e) {
      const el = this.$refs.scroll.$el
      if (el.scrollTop + el.offsetHeight < el.scrollHeight) {
        console.log('显示有新消息来提示有新消息')
      } else {
        this.$refs.scroll.$el.scrollTop = this.$refs.scroll.$el.scrollHeight
      }
    },
    toBottom () {
      this.$refs.scroll.$el.scrollTop = this.$refs.scroll.$el.scrollHeight
      setTimeout(() => {
        console.log(this.$refs.scroll.$el.scrollTop, 'scrollTop')
        console.log(this.$refs.scroll.$el.offsetHeight, 'offsetHeight')
        console.log(this.$refs.scroll.$el.scrollHeight, 'scrollHeight')
      }, 200)
    }
  }
}
</script>
<style lang="scss" scoped>
.aside {
  /* height: 100%; */
  .anchor-info {
    height: 50px;
    background: violet;
  }
  .sidebar_wrap {
    width: 210px !important;
    background-color: #304156;
    position: fixed;
    top: 50px;
    bottom: 0;
    left: 0;
    z-index: 10010000;
    /* overflow: hidden; */
    .ps {
      /* height: calc(100% - 4rem); */
      height: 100%;
    }
    ul {
      li {
        margin: 10px;
      }
    }
  }
  .right {
    &_box {
      padding-left: 250px;

      .pentagon {
        .trapezoid {
          border-top: 40px solid red;
          border-left: 20px solid transparent;
          /* border-right: 20px solid transparent;  两边+宽度就是个梯形*/
          height: 0;
          width: 0px;
          float: left;
        }
        .rectangle {
          background: red;
          float: left;
          height: 40px;
          line-height: 40px;
        }
      }
    }

  }
}

/* hover和focus时候的滚动条样式 */
.aside/deep/ {
  .ps__rail-y {
    width: 0;
  }
  .ps__rail-y:hover > .ps__thumb-y,
  .ps__rail-y:focus > .ps__thumb-y,
  .ps__rail-y.ps--clicking .ps__thumb-y {
    width: 6px;
  }
}
</style>
